import { ConfigProvider, message } from "antd";
import zhCN from "antd/locale/zh_CN";
import { Provider, useDispatch } from "react-redux";
import store from "./store";
import { themeContext } from "./themeContext";
import RouterView from "@/router/index";
import BackTop from "@/components/other/BackTop";
import styled from "styled-components";
import GlobalModal from "./components/modal";
import { SwitchTransition, CSSTransition } from "react-transition-group";
import { useLocation, useRoutes } from "react-router-dom";
import routes from "./router/routes";
import { cloneDeep } from "lodash";
import AppHeader from "./components/layout/AppHeader";
import { api } from "./api";
import { useEffect } from "react";
import action from "./store/action";

const Styled = styled.div`
  width: 100%;
  height: 100%;
  position: relative;
  .wh-full {
    width: 100%;
    height: 100%;
  }
  .flex-col {
    display: flex;
    flex-direction: column;
  }
`;

const App = () => {
  const [messageApi, contextHolder] = message.useMessage();
  const location = useLocation();
  const curRoute = useRoutes(cloneDeep(routes));
  const nodeRef = curRoute.props.match.route.nodeRef || {};

  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(action.app.getBlogInfo());
    dispatch(action.user.getUserInfo());
  }, []);

  return (
    <Styled>
      {contextHolder}
      <themeContext.Provider value={{ messageApi }}>
        {/* 顶部导航栏 */}
        <AppHeader />
        <div className="wh-full flex-col">
          <SwitchTransition mode="out-in">
            <CSSTransition
              classNames="fade"
              timeout={300}
              key={location.pathname}
              nodeRef={nodeRef}
              unmountOnExit
            >
              <div ref={nodeRef} style={{ height: "100%", width: "100%" }}>
                <RouterView></RouterView>
              </div>
            </CSSTransition>
          </SwitchTransition>
        </div>
        {/* 回到顶部 */}
        <BackTop />
        {/* 弹窗模型 */}
        <GlobalModal />
      </themeContext.Provider>
    </Styled>
  );
};

export default App;
